<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>menubutton 测试</title>
<link href="../../button/assets/common.css" rel="stylesheet"/>
<link href="../../button/assets/custombutton.css" rel="stylesheet"/>
<link href="../assets/menubutton.css" rel="stylesheet"/>
<link href="../../overlay/assets/cool.css" rel="stylesheet"/>
<link href="../../menu/assets/menu.css" rel="stylesheet"/>
<link href="../../menu/assets/menuitem.css" rel="stylesheet"/>
<link href="../../menu/assets/submenu.css" rel="stylesheet"/>
<link href="../../menu/assets/c2c-ui.css" rel="stylesheet"/>
<style>
    .ks-menu {
        background: white;
        border: 1px solid red;
    }

    li {
        padding: 5px;
        border: 1px solid white;
    }
</style>
</head>
<body>

<h1 id="describe">菜单按钮演示</h1>
<div style="height:200px;overflow: auto;border:1px solid red;">
    <h2>设计说明</h2>
    <ol>
        <li>支持键盘，鼠标互操作</li>
        <li>符合 wai-aria 规范</li>
        <li>构建组件层次</li>
    </ol>

    <h2>使用说明</h2>
    <ol>
        <li>
            tab 移动焦点到按钮：按钮周边粉框
        </li>
        <li>
            按钮获得焦点时点击上或下键，弹出菜单
            <ol>
                <li>或点击按钮弹出菜单</li>
            </ol>
        </li>


        <li>
            菜单弹出后，上下键选择菜单项
            <ol>
                <li>或通过鼠标掠过</li>
            </ol>
        </li>

        <li>
            带有子菜单的菜单项通过右键激活子菜单，左键收缩子菜单
            <ol>
                <li>或通过鼠标掠过，自动弹出子菜单</li>
            </ol>
        </li>

        <li>
            菜单项弹出后，按下 enter 或 space 则选中当前高亮菜单项
            <ol>
                <li>或通过鼠标点击选中任意菜单项</li>
            </ol>
        </li>

        <li>
            esc 隐藏下拉菜单（焦点仍然在按钮上）
            <ol>
                <li>或通过鼠标点击文档空白区域（按钮失去焦点）</li>
            </ol>
        </li>
    </ol>
</div>

<h1>简单菜单按钮</h1>
<div id="button_container" role='application'>

</div>
<label>禁用：<input type="checkbox" id='dis'/></label>
<script src="../../../build/kissy.js"></script>
<script>
    KISSY.Config.base = '../../';
    KISSY.Config.tag = Math.random();
</script>
<!--
<script src="http://assets.daily.taobao.net/s/kissy/1.2.0/kissy.js"></script>
-->

<script>

    KISSY.ready(function(S) {
        KISSY.use("menubutton,menu", function(S, MenuButton, Menu) {
            var $ = S.all;


            var sb = new Menu.PopupMenu({
                prefixCls:"goog-"
            });

            sb.addChild(new Menu.Item({content:"已买到的宝贝",
                prefixCls:"goog-"}));
            sb.addChild(new Menu.Item({content:"已卖出的宝贝",
                prefixCls:"goog-",disabled:true}));


            var sb2 = new Menu.PopupMenu({
                prefixCls:"goog-"
            });
            sb2.addChild(new Menu.Item({content:"收藏的宝贝",
                prefixCls:"goog-"}));
            sb2.addChild(new Menu.Item({content:"收藏的店铺",
                prefixCls:"goog-"}));
            var b2 = new Menu.SubMenu({
                content:"收藏夹",
                prefixCls:"goog-",
                menu:sb2
            });
            sb.addChild(b2);

            var b = new Menu.SubMenu({
                content:"我的淘宝",
                menu:sb,
                prefixCls:"goog-"
            });

            var alone = new Menu.Item({content:"我要买",prefixCls:"goog-"});
            var menu = new Menu.PopupMenu({
                prefixCls:"goog-",
                children:[b,
                    new Menu.Separator({prefixCls:"goog-"}),
                    alone,
                    new Menu.Item({content:"我要卖",prefixCls:"goog-"})]
            });
            //model and control
            //view as a parameter
            var bbbbb = new MenuButton({
                prefixCls:"goog-",
                content:"淘宝网",
                describedby:"describe",
                menu:menu,
                render:"#button_container"
            });

            menu.on("click", function(ev) {
                S.log("selected : " + ev.target.get("content"));
            });

            bbbbb.render();

            var dis = $("#dis");

            dis.on("click", function() {
                if (dis[0].checked) {
                    bbbbb.set("disabled", true);
                } else {
                    bbbbb.set("disabled", false);
                }
            });

            if (dis[0].checked) {
                bbbbb.set("disabled", true);
            } else {
                bbbbb.set("disabled", false);
            }
        });
    });
</script>
</body>
</html>